<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <div v-html="msg1" :id="id"></div>
    <div>{{number+1}}</div>
    <p v-if="see">看得见我了吗？</p>
    <div>{{revers.split('').reverse().join('')}}</div>
    <div>
      <p>原始信息:{{message}}</p>
      <p>计算信息:{{reversedMessage}}</p>
      <p>计算信息2:{{reversedMessage1}}</p>
      <p>表达式方式:{{reversMethod()}}</p>
      <p>watch fullname:{{fullName}}</p>
    </div>
    <!-- 我们可以传给 v-bind:class 一个对象，以动态地切换 class： -->
    <div v-bind:class="{active:isActive}">v-bind:class</div>
    <!-- 你可以在对象中传入更多属性来动态切换多个 class。此外，v-bind:
    class 指令也可以与普通的 class 属性共存。当有如下模板:-->
    <div
      class="static"
      v-bind:class="{active:isActive,'text-danger':hasError}"
    >active:isActive,'text-danger':hasError</div>
    <!-- 绑定的数据对象不必内联定义在模板里： -->
    <div v-bind="classObject">绑定的数据对象不必内联定义在模板里</div>
    <!-- 渲染的结果和上面一样。我们也可以在这里绑定一个返回对象的计算属性。 -->
    <div v-bind="classObject1">渲染的结果和上面一样。我们也可以在这里绑定一个返回对象的计算属性。</div>
    <!-- 数组语法 -->
    <div v-bind:class="[activeClass,errorClass]">我们可以把一个数组传给 v-bind:class，以应用一个 class 列表：</div>
    <!-- 绑定内联样式 -->
    <div v-bind:style="{color:activeColor,fontSize:fontSize+'px'}">绑定内联样式</div>
    <!-- 直接绑定到一个样式对象通常更好，这会让模板更清晰： -->
    <div v-bind:style="styleObject1">直接绑定到一个样式对象通常更好，这会让模板更清晰：</div>
    <!-- v-bind:style 的数组语法可以将多个样式对象应用到同一个元素上： -->
    <div v-bind:sytle="[baseStyles,overridingStyles]">v-bind:style 的数组语法可以将多个样式对象应用到同一个元素上：</div>
    <!-- v-if -->
    <h1 v-if="ok">yes</h1>
    <h1 v-else>no</h1>
    <!-- v-else-if -->
    <div v-if="type==='A'">优秀</div>
    <div v-else-if="type==='B'">良好</div>
    <div v-else-if="type==='C'">及格</div>
    <div v-else>不及格</div>
    <!-- v-show -->
    <h1 v-show="okshow">v-show 就简单得多——不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换。</h1>
    <!--列表渲染-->
    <div>
      <ul id="example-1">
        <h1 v-for="(item,index) in items" :key="item.id">{{index}}-{{item.message}}</h1>
      </ul>
    </div>
    <!-- 一个对象的 v-for -->
    <div v-for="(item,key) in object" :key="key">{{key}}{{item.message}}</div>

    <!--TODO-->
    <div id="todo-list-example">
      <form v-on:submit.prevent="addNewTodo">
        <label for="new-todo">Add a todo</label>
        <input v-model="newTodoText" id="new-todo" placeholder="E.g. Feed the cat">
        <button>Add1</button>
      </form>
      <ul>
        <li
          is="todo-item"
          v-for="(todo, index) in todos"
          v-bind:key="todo.id"
          v-bind:title="todo.title"
          v-on:remove="todos.splice(index, 1)"
        ></li>
      </ul>
    </div>
    <!-- 可以用 v-on 指令监听 DOM 事件，并在触发时运行一些 JavaScript 代码。 -->
    <div>
      <button v-on:click="counter+=1">add 1</button>
      <p>这个按钮已经被点击了{{counter}}次</p>
    </div>
    <!-- 然而许多事件处理逻辑会更为复杂，所以直接把 JavaScript 代码写在 v-on 指令中是不可行的。
    因此 v-on 还可以接收一个需要调用的方法名称。-->
    <div id="example-2">
      <button v-on:click="greet">打个招呼</button>
    </div>
    <!-- 内联处理器中的方法 -->
    <div id="example-3">
      <button v-on:click="say('hi')">你好</button>
      <button v-on:click="say('what')">干什么 啊</button>
    </div>
    <!-- 有时也需要在内联语句处理器中访问原始的 DOM 事件
    。可以用特殊变量 $event 把它传入方法：-->
    <div>
      <button v-on:click="warn('表单不能够提交啊~,$event')">提交</button>
    </div>

    <!-- 表单输入绑定 文本-->
    <div>
      <input v-model.lazy="message" placeholder="请输入你的信息">
      <p>message is{{message}}</p>
    </div>
    <!-- 表单输入绑定 多行文本-->
    <div>
      <span>多行文本</span>
      <textarea v-model="message" placeholder="输入吧"></textarea>
      <p style="color:red">{{message}}</p>
    </div>
    <!-- 复选框 -->
    <div>
      <input type="checkbox" id="checkbox" v-model="checked">
      <label for="checkbox">{{checked}}</label>
    </div>
    <!-- 多个复选框，绑定到同一个数组： -->
    <div id="example-3">
      <input type="checkbox" id="hls" value="黄柳淞" v-model="checkedNames">
      <label for="hls">黄柳淞</label>
      <input type="checkbox" id="huangliusong" value="huangliusong" v-model="checkedNames">
      <label for="huangliusong">huangliusong</label>
      <input type="checkbox" id="hls" value="hls" v-model="checkedNames">
      <label for="hls">hls</label>
    </div>
    <div>
      <span>checked names:{{checkedNames}}</span>
    </div>
    <!-- 单选按钮 -->
    <div id="example-4">
      <input type="radio" id="one" value="one" v-model="picked">
      <label for="one">one</label>
      <br>
      <input type="radio" id="two" value="two" v-model="picked">
      <label for="two">two</label>
    </div>
    <div>
      <span>{{picked}}</span>
    </div>
    <!-- 选择框 -->
    <div id="example-5">
      <select v-model="selected">
        <option disabled value>请选择</option>
        <option>huangliusong</option>
        <option>hls</option>
        <option>leo</option>
      </select>
    </div>
    <div>
      <span>{{selected}}</span>
    </div>
    <!-- 多选时 (绑定到一个数组)： -->
    <!-- <div id="example-6">
      <select v-model="selected" multiple style="width:150px;">
        <option key="1" value="2010">2010</option>
        <option key="2" value="2011">2011</option>
        <option key="3" value="2012">2012</option>
        <option key="4" value="2013">2013</option>
      </select>
    </div>-->
    <!-- 用 v-for 渲染的动态选项： -->
    <select v-model="selected">
      <option v-for="option in options" v-bind:value="option.value" :key="option.id">{{option.text}}</option>
    </select>
    <div>
      <span>{{selected}}</span>
    </div>

    <!-- 单元素/组件的过渡 -->
    <div>
      <button v-on:click="show=!show">触发</button>
      <transition name="hls">
        <p v-if="show">黄柳淞</p>
      </transition>
    </div>
    <!--com-->
    <com :age="hlsage" @patch="msgcli"></com>
    <!--CSS过渡-->
    <div>
      <button @click="show=!show">css过渡</button>
      <transition name="slide-fade">
        <p v-if="show">你好</p>
      </transition>
    </div>
    <!--CSS动画-->
    <div id="example-2">
      <button @click="show=!show">show</button>
      <transition name="bounce">
        <p v-if="show">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit.
          Mauris facilisis enim libero, at lacinia diam fermentum id.
          Pellentesque habitant morbi tristique senectus et netus.
        </p>
      </transition>
    </div>
    <!-- 他们的优先级高于普通的类名，这对于 Vue 的过渡系统和其他第三方 CSS 动画库，如 Animate.css 结合使用十分有用。 -->
    <div>
      <button @click="showcss=!showcss">Animate.css</button>
      <transition
        :duration="{ enter: 5000, leave: 8000 }"
        name="custom-classes-transition"
        enter-active-class="animated jello"
        leave-active-class="animated bounceOutRight"
      >
        <p v-if="showcss">他们的优先级高于普通的类名</p>
      </transition>
    </div>
    <!-- 一个使用 Velocity.js 的简单例子 -->
    <div>
      <button @click="show1=!show1">一个使用 Velocity.js 的简单例子</button>
      <transition
        v-if="show1"
        v-on:before-enter="beforeEnter"
        v-on:enter="enter"
        v-on:leave="leave"
        v-bind:css="false"
      >
        <p>一个使用 Velocity.js 的简单例子</p>
      </transition>
    </div>
    <!--多个组件的过渡简单很多 - 我们不需要使用 key 特性。相反，我们只需要使用动态-->
    <div>
      <input type="radio" id="one" value="v-a" v-model="view">
      <input type="radio" id="one" value="v-b" v-model="view">
      <transition name="component-fade" mode="out-in">
        <component v-bind:is="view"></component>
      </transition>
    </div>
    <!-- 列表的进入/离开过渡 -->
    <div id="list-demo" class="demo">
      <button v-on:click="add">Add</button>
      <button v-on:click="remove">Remove</button>
      <transition-group name="list" tag="p">
        <span v-for="item in items1" v-bind:key="item" class="list-dmeo">{{item}}</span>
      </transition-group>
    </div>
    <!-- 列表的排序过渡 -->
    <div id="flip-list-demo" class="demo">
      <button v-on:click="shuffle">洗牌</button>
      <transition-group name="flip-list" tag="ul">
        <li v-for="item in items2" v-bind:key="item">{{item}}</li>
      </transition-group>
    </div>

    <div>
      <!--vuex 使用-->
      <!-- <Vuexx/> -->
      <!--vuex 模块使用-->
      <pagea/>
      <pageb/>
    </div>
    <!--基于is的动态组件-->
    <div>
      <div>基于is的动态组件</div>
      <div>
        <button @click="hlsabmethod">动态切换组件is</button>
      </div>
      <div>
        <component :is="hlsab"></component>
      </div>
    </div>
    <hlsvue1/>
    <hlsvue2/>
    <div>
      <br>
    </div>
  </div>
</template>
<script>
import TodoItem from './TodoItem.vue'
import com from './com.vue'
import Velocity from 'velocity-animate'
// import Vuexx from './vuex.vue'
import pagea from './a.vue'
import pageb from './b.vue'
import hlsa from './hls1.vue'
import hlsb from './hls2.vue'
import hlsvue1 from './hlsvue1.vue'
import hlsvue2 from './hlsvue2.vue'
var _ = require('lodash')

export default {
  name: 'HelloWorld',
  props: {
    msg: String
  },
  components: {
    hlsvue1,
    hlsvue2,
    hlsa,
    hlsb,
    pagea,
    pageb,
    TodoItem,
    com,
    // Vuexx,
    'v-a': {
      template: '<div>Component A</div>'
    },
    'v-b': {
      template: '<div>Component B</div>'
    }
  },
  data() {
    return {
      hlsab: 'hlsa',
      items2: [1, 2, 3, 4, 5, 6, 7, 8, 9],
      items1: [1, 2, 3, 4, 5, 6, 7, 8, 9],
      nextNum: 10,
      view: 'v-a',
      show1: true,
      showcss: true,
      hlsage: 88,
      show: true,
      msg1: '<span style="color:red">huangliusong</span>',
      id: 'hls',
      number: 1,
      see: false,
      revers: 'huang liu song',
      message: 'huang liu song',
      firstName: 'huang',
      lastName: 'liusong',
      fullName: '',
      fullNameH: '',
      question: '',
      answer: '',
      isActive: true,
      hasError: true,
      classObject: {
        active: true,
        'text-danger': true
      },
      activeClass: 'active',
      errorClass: 'text-danger',
      activeColor: 'red',
      fontSize: 38,
      styleObject1: {
        color: '#cf2525db',
        fontSize: '13px'
      },
      baseStyles: 'color:green',
      overridingStyles: 'color:red',
      ok: false,
      type: 'A',
      okshow: true,
      items: [
        { message: '黄柳淞' },
        { message: 'hls' },
        { message: 'huangliusong' },
        {
          message: '黃'
        }
      ],
      object: {
        firstName: '我的姓',
        lastName: '我的名',
        age: 67
      },
      newTodoText: '',
      todos: [
        {
          id: 1,
          title: '今天去吃个饭'
        },
        {
          id: 2,
          title: '去上个厕所吧'
        },
        {
          id: 3,
          title: '去看电影'
        }
      ],
      nextTodoId: 4,
      counter: 0,
      checked: false,
      checkedNames: [],
      picked: '',
      selected: '',
      options: [
        { text: 'one', value: 'A' },
        { text: 'two', value: 'B' },
        { text: 'three', value: 'C' },
        { text: 'four', value: 'D' }
      ]
    }
  },
  methods: {
    hlsabmethod: function() {
      if (this.hlsab === 'hlsa') {
        this.hlsab = 'hlsb'
      } else {
        this.hlsab = 'hlsa'
      }
    },
    shuffle: function() {
      this.items2 = _.shuffle(this.items2)
    },
    randomIndex: function() {
      return Math.floor(Math.random() * this.items1.length)
    },
    add: function() {
      this.items1.splice(this.randomIndex(), 0, this.nextNum++)
    },
    remove: function() {
      this.items1.splice(this.randomIndex(), 1)
    },
    beforeEnter: function(el) {
      el.style.opacity = 0
      el.style.transformOrigin = 'left'
    },
    enter: function(el, done) {
      Velocity(el, { opacity: 1, fontSize: '1.4em' }, { duration: 300 })
      Velocity(el, { fontSize: '1em' }, { complete: done })
    },
    leave: function(el, done) {
      Velocity(el, { translateX: '15px', rotateZ: '50deg' }, { duration: 600 })
      Velocity(el, { rotateZ: '100deg' }, { loop: 2 })
      Velocity(
        el,
        {
          rotateZ: '45deg',
          translateY: '30px',
          translateX: '30px',
          opacity: 0
        },
        { complete: done }
      )
    },
    msgcli: function() {
      this.hlsage++
    },
    //wDrn
    warn: function(message, event) {
      if (event) {
        event.preventDefault()
      }
      alert(message)
    },
    //say
    say: function(message) {
      alert(message)
    },
    //greet
    greet: function(event) {
      alert('hello' + this.message + '!')
      if (event) {
        alert(event.target.tagName)
      }
    },
    //todo
    addNewTodo: function() {
      this.todos.push({
        id: this.nextTodoId++,
        title: this.newTodoText
      })
      this.newTodoText = ''
    },
    //反转字符方法
    reversMethod: function() {
      return this.message
        .split('')
        .reverse()
        .join('')
    },
    getAnswer: function() {}
  },
  template: '<p>',
  computed: {
    //反转字符串的计算属性
    reversedMessage: function() {
      return this.message
        .split('')
        .reverse()
        .join('')
    },
    //添加其他字符串的计算属性
    reversedMessage1: function() {
      return this.message + ' 计算出来了'
    },
    //getter
    get: function() {
      return this.firstName + '  ' + this.lastName
    },
    //setter
    classObject1: function() {
      return {
        active: this.isActive && this.hasError,
        'text-danger': !this.hasError
      }
    }
  },
  //监听属性
  watch: {
    firstName: function(val) {
      this.fullName = val + '' + this.lastName
    },
    lastName: function(val) {
      this.fullName = this.firstName + '' + val
    },
    //如果question发生了改变，这个函数就会执行
    question: function() {}
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h3 {
  margin: 40px 0 0;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
.text-danger {
  color: #cf2525db;
  font-size: 20px;
}
.hls-enter-active,
.hls-leave-active {
  transition: opacity 0.5s;
}
.hls-enter,
.hls-leave-to {
  opacity: 0;
}
.slide-fade-enter-active {
  transition: all 0.3s ease;
}
.slide-fade-leave-active {
  transition: all 0.8s cubic-bezier(1, 0.5, 0.8, 1);
}
.slide-fade-enter,
.slide-fade-leave-to {
  transform: translate(10px);
  opacity: 0;
}
.bounce-enter-active {
  animation: bounce-in 0.5s;
}
.bounce-leave-active {
  animation: bounce-in 0.5s reverse;
}
@keyframes bounce-in {
  0% {
    transform: scale(0);
  }
  5% {
    transform: scale(1.5);
  }
  100% {
    transform: scale(1);
  }
}
.component-fade-enter-active,
.component-fade-leave-active {
  transition: opacity 0.3s ease;
}
.component-fade-enter, .component-fade-leave-to
/* .component-fade-leave-active for below version 2.1.8 */ {
  opacity: 0;
}
.list-item {
  display: inline-block;
  margin-right: 10px;
}
.list-enter-active,
.list-leave-active {
  transition: all 1s;
}
.list-enter, .list-leave-to
/* .list-leave-active for below version 2.1.8 */ {
  opacity: 0;
  transform: translateY(30px);
}
.flip-list-move {
  transition: transform 1s;
}
</style>
